<div class="content">
    <div class="time-line">
        <div class="fragment " [ngClass]="{'color-green': item.status == 'free', 'color-red':item.status == 'using'}"
            [ngStyle]="{'width': item.proportion + '%'}" nz-popover [nzPopoverContent]="contentTemplate"
            *ngFor="let item of fragmentList" (click)="selectTimeSpace(item)">
            <ng-template #contentTemplate>
                <div class="padding-s">
                    <div>起：{{item.fromTime | date:'yyyy-MM-dd HH:mm'}}</div>
                    <div>止：{{item.toTime | date:'yyyy-MM-dd HH:mm'}}</div>
                </div>
            </ng-template>
        </div>
    </div>

    <div class="axis">
        <div class="line">
            <div class="scale-flag left"></div>
            <div class="scale-flag center"></div>
            <div class="scale-flag right"></div>
        </div>

        <div class="scale-panel">
            <div class="scale">
                {{begin | date:'yyyy-MM-dd HH:mm'}}
            </div>
            <!-- <div class="scale">
                2021-1-21 00:00
            </div> -->
            <div class="scale">
                {{end | date:'yyyy-MM-dd HH:mm'}}
            </div>
        </div>

    </div>

    <div class="tagging">
        <div class="flag color-green"></div>
        <span>可使用</span>
        <div class="flag color-red"></div>
        <span>被占用</span>
    </div>

</div>